<!--
 * @Author: C.
 * @Date: 2023-12-12 10:08:08
-->
<template>
  <PageWrapper title="demo" :is-h5-demo-page="true" :footer="false">
    <view class="list-container">
      <view v-for="(item, index) in listData" :key="index" class="list-item">
        <view class="item-box" @click="navDemoPage(item.url)">
          <!-- <t-icon :name="item.icon" /> -->
          <view>{{ item.title }}</view>
        </view>
      </view>
    </view>
  </PageWrapper>
</template>
<script lang="ts" setup>
// ----------------------------- 第三方引入 -----------------------------
import { ref } from 'vue'

// ----------------------------- hooks -----------------------------
import { useRouter } from '@/hooks/web/useRouter'
// ----------------------------- 组件 -----------------------------
import PageWrapper from '@/components/page-wrapper/index'

// ----------------------------- 其他引入 -----------------------------

//----------------------------- 变量声明区 -----------------------------
const listData = ref([
  {
    title: '表单',
    url: '/pages/test/sub-pages/form-demo/index',
  },
  {
    title: '列表',
    url: '/pages/test/sub-pages/list-demo/index',
  },
  {
    title: '登录页',
    url: '/pages/system/login/index',
  },
])
// ----------------------------- hooks使用区 -----------------------------
const { push } = useRouter()
// ----------------------------- 钩子函数区 -----------------------------

//  ----------------------------- 自定义方法区 -----------------------------
function navDemoPage(url: string) {
  push({
    url,
  })
}
</script>
<style lang="scss">
.list-container {
  width: 100%;
  padding: 10rpx;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10rpx;
  .item-box {
    background-color: #ffffff;
    width: 100%;
    height: 100rpx;
    /* margin: 20rpx 10rpx; */
    border-radius: 10rpx;
    @include flexBox();
  }
}
</style>
